<template>
    <view class="container">
        <view class="example">
            <u-form :model="user" ref="uForm" :rules="rules" labelPosition="top" labelWidth="auto" :labelStyle="{marginBottom: '20rpx'}">
                <u-form-item borderBottom label="故障设备" prop="deviceCode" @click="handleDeviceCodeClick">
                    <u--input 
                        v-model="user.deviceCode" 
                        disabled 
                        disabledColor="#ffffff" 
                        placeholder="请选择故障设备"
                        border="none"
                    ></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item label="故障描述" prop="description">
                    <u--textarea v-model="user.description" :height="150" :maxlength="200" placeholder="请输入故障描述"
                        count></u--textarea>
                </u-form-item>
            </u-form>
            <view style="margin-top: 40px;"><u-button type="primary" @click="submit">提交</u-button></view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            user: {
                deviceCode: "",
                description: ""
            },
            rules: {
                deviceCode: [{
                    required: true,
                    message: '故障设备不能为空',
                    trigger: ['blur', 'change']
                }],
                description: [{
                    required: true,
                    message: '故障描述不能为空',
                    trigger: ['blur']
                }]
            }
        }
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules)
    },
    methods: {
        handleDeviceCodeClick() {
            // uni.$u.toast('请选择故障设备')
            this.user.deviceCode = '1'
        },
        submit() {
            this.$refs.uForm.validate().then(valid => {
                if (!valid) return;
                this.$utils.showLoading('提交中...')
                this.$services.homeService
                    .applyToRepair({
                        buildingId: '',
                        repairType: this.user.deviceCode,
                        repairDesc: this.user.description
                    })
                    .then(res => {
                        this.$utils.hideLoading()
                        this.$utils.showMessage('提交成功')
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                    }).catch(err => {
                        this.$utils.hideLoading()
                    })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background-color: #ffffff;
}

.example {
    padding: 30rpx;
    background-color: #fff;
}

.u-button {
    margin-top: 40rpx;
}
</style>